{extend name="public/base" /}
{block name="title"}资源管理{/block}
{block name="css"}
<link href="__PUBLIC__/static/inspinia/css/plugins/dropzone/dropzone-4.3.0.min.css" rel="stylesheet">
<link href="__PUBLIC__/static/inspinia/css/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet">
{/block}
{block name="main"}
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>图片列表 </h5>
                <div class="ibox-tools">
                    <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-wrench"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        <li><a href="{:url(request()->controller().'/uploadImage')}">上传图片</a></li>
                    </ul>
                    <a class="close-link">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>

            <div class="ibox-content">
                <div class="row">
                    <div class="col-lg-4">
                        <a class="btn btn-primary " href="{:url(request()->controller().'/uploadImage')}">图片上传</a>
                    </div>
                    <div class="col-lg-8 col-md-8 text-right">
                        <form method="get" role="form" class="form-inline">
                            <div class="form-group">
                                <input type="text" name="key" placeholder="备注词" class="form-control"
                                       value="{$Think.get.key|default=''}">
                            </div>
                            <button type="submit" class="btn btn-primary" style="margin-bottom: 0px">查找</button>
                        </form>
                    </div>
                </div>


                <div class="row">
                    <div class="col-lg-12 ">

                        {volist name='imageList' id='image'}
                        <div class="file-box">
                            <div class="file ">
                                <div class="pull-right " id="deleteBtn" style="display: none">
                                    <a class="btn-circle ajax-a" href="{:url('Resource/deleteImage',['imageId'=> $image.image_id])}"><i class="fa fa-times-circle fa-2x "></i></a>
                                </div>
                                <div class="lightBoxGallery">
                                    <a href="{$image.full_image_url}" data-gallery>
                                        <!--<span class="corner"></span>-->
                                        <img alt="image" class="img-responsive" src="{$image.full_image_url}" >
                                    </a>
                                </div>
                                <div class="file-name">
                                    {$image.remark}
                                    <br/>
                                    <small>上传时间:{$image.create_time}</small>
                                </div>
                            </div>
                        </div>
                        {/volist}

                        <!-- The Gallery as lightbox dialog, should be a child element of the document body -->
                        <div id="blueimp-gallery" class="blueimp-gallery ">
                            <div class="slides"></div>
                            <a class="close">×</a>

                        </div>

                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="pull-right" >{$pages|raw}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<!-- 上传插件 -->
<script src="__PUBLIC__/static/inspinia/js/plugins/dropzone/dropzone-4.3.0.min.js"></script>
<!-- blueimp gallery -->
<script src="__PUBLIC__/static/inspinia/js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>
<script>

    //删除图片
    $('.file-box').hover(function (){
            $(this).find('#deleteBtn').show();
        },function () {
            $(this).find('#deleteBtn').hide();
        }
    );
</script>
{/block}